<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/Swiper/3.3.1/css/swiper.css">
    <title>原神</title>
    <style>
        html,
        body {
            width: 100%;
            margin: 0;
        }

        img {
            width: 100%;
        }

        ul {
            list-style: none;
            color: #f8f9f9;
            text-align: center;
            padding: 0;
            margin: 0;
        }

        li {
            margin: 1rem;
        }

        .col {
            display: flex;
            flex-flow: column;
            align-items: center;
        }

        .row {
            display: flex;
            flex-flow: row;
            justify-content: center;
        }

        body {
            display: flex;
            flex-flow: column;
        }

        .head {
            z-index: 1;
            display: flex;
            flex-flow: row;
            width: 100%;
            height: 14%;
            background-image: linear-gradient(#000000, #ffffff);
            opacity: 0.9;
        }

        .logo {
            width: 8%;
            padding: 1.5%;
        }

        .banner {
            display: flex;
            flex-flow: column;
            width: 75%;
            padding-right: 5%;
        }

        .upper {
            display: flex;
            justify-content: flex-end;
            flex-flow: row;
            padding-top: 1.5%;
        }

        .upperelement {
            color: #cacbcc;
            margin-inline: 1%;
            font-size: small;
        }

        .input {
            display: none;
        }

        .search {
            margin-inline: 1%;
            font-size: small;
        }

        .downer {
            display: flex;
            flex-flow: row;
            justify-content: flex-end;
            padding-bottom: 1%;
        }

        .downerelement {
            color: #f8f9f9;
            padding: 2%;
            font-size: medium;
            font-weight: 550;
            border-style: solid;
        }

        .button {
            width: 6%;
            background-image: url("images/img100.png");
            background-repeat: no-repeat;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .buttonelement {
            background-image: url("images/navA.png");
            background-repeat: no-repeat;
            width: 40%;
            height: 40%;
            display: flex;
            flex-flow: column;
            justify-content: center;
        }

        .nav {
            position: absolute;
            border-style: dashed;
            background-color: #ffffff;
            /* padding-top: 2rem; */
            display: none;
        }

        .pictures {
            display: flex;
            flex-flow: row;
            padding: 3%;
        }

        .imgcontainer {
            display: flex;
            flex-flow: column;
            margin: 1%;
            width: 30%;
            text-align: center;
        }

        .imgcontainer img:hover {
            transform: scale(1.05);
            transition: transform 300ms;
        }

        .modal {
            width: 100%;
            height: 100%;
            display: none;
        }

        .cover {
            background-image: url("images/nav-bg.jpg");
            background-repeat: no-repeat;
            z-index: 3000;
            position: fixed;
            top: 14%;
            width: 100%;
            height: 100%;
            margin: 0;
        }

        .swiper-container {
            z-index: 0;
            width: 100%;
            margin: 0 auto;
        }

        .swiper-slide {
            width: 100%;
            text-align: center;
            font-size: 18px;
            background: #fff;

            /* Center slide text vertically */
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>

<body>
    <div class="head">
        <div class="logo">
            <img src="images/logo2.png" alt="logo">
        </div>
        <div class="banner">
            <div class="upper">
                <div class="upperelement">访客</div>
                <div class="upperelement">原友</div>
                <div class="upperelement">捐赠</div>
                <div class="upperelement">人才招聘</div>
                <div class="upperelement">报个bug</div>
                <div class="upperelement">邮箱</div>
                <div class="upperelement">登录</div>
                <div class="upperelement">|</div>
                <input class="input">
                <div class="search">🔍</div>

            </div>
            <div class="downer">
                <div class="downerelement"><a href="https://ys.mihoyo.com/main/" target="_blank">官网首页</a></div>
                <div class="downerelement">
                    <div>提瓦特新闻↓</div>
                    <div class="nav">
                        <ul class="col" style="color: #6510ad;">
                            <li>
                                大战风魔龙
                            </li>
                            <li>
                                岩王帝君之死
                            </li>
                            <li>
                                直面无想的一刀
                            </li>
                            <li>
                                教令院的伪神
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="downerelement"><a href="https://ys.mihoyo.com/main/character/mondstadt?char=0" target="_blank">角色介绍</a></div>
                <div class="downerelement">
                    玩法教学↓
                    <div class="nav">
                        <ul class="col" style="color: #104cad;">
                            <li>
                                每日委托
                            </li>
                            <li>
                                抽卡机制
                            </li>
                            <li>
                                等级提升
                            </li>
                            <li>
                                解锁锚点
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="downerelement">
                    游戏攻略↓
                    <div class="nav">
                        <ul class="col" style="color: #6510ad;">
                            <li>
                                委托攻略
                            </li>
                            <li>
                                大世界攻略
                            </li>
                            <li>
                                秘境攻略
                            </li>
                            <li>
                                道具攻略
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="downerelement">
                    广纳贤士↓
                    <div class="nav">
                        <ul class="col" style="color: #6510ad;">
                            <li>
                                程序员
                            </li>
                            <li>
                                美工组
                            </li>
                            <li>
                                策划组
                            </li>
                            <li>
                                运维组
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="downerelement"><a href="application.html">报名参加小活动</a></div>
                <div class="downerelement">
                    其他↓
                    <div class="nav">
                        <ul class="col" style="color: #6510ad;">
                            <li>
                                调查问卷
                            </li>
                            <li>
                                实用信息
                            </li>
                            <li>
                                提瓦特风光
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

        </div>
        <div class="button">
            <div class="buttonelement">
            </div>
        </div>
    </div>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img src="images/swiper/swipper1.jpg" alt="1">
            </div>
            <div class="swiper-slide">
                <img src="images/swiper/swipper2.jpg" alt="2">
            </div>
            <div class="swiper-slide">
                <img src="images/swiper/swipper3.jpg" alt="3">
            </div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
        <!-- Add Arrows -->
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
    </div>
    <div class="pictures">
        <div class="imgcontainer">
            <img src="images/pictures/p1.jpg" alt="1">
            <br>蒙德：自由之邦
        </div>
        <div class="imgcontainer">
            <img src="images/pictures/p2.png" alt="2">
            <br>璃月：契约之港
        </div>
        <div class="imgcontainer">
            <img src="images/pictures/p3.jpg" alt="3">
            <br>稻妻：永恒之城
        </div>
    </div>

    <div class="modal" id="modal" style="display:none">
        <div class="cover">
            <ul class="row">
                <li>
                    <h2>首页</h2>
                </li>
                <li>
                    <h2>提瓦特新闻↓</h2>
                    <ul class="col">
                        <li>
                            大战风魔龙
                        </li>
                        <li>
                            岩王帝君之死
                        </li>
                        <li>
                            直面无想的一刀
                        </li>
                        <li>
                            教令院的伪神
                        </li>
                    </ul>
                </li>
                <li>
                    <h2>角色介绍</h2>
                </li>
                <li>
                    <h2>玩法教学↓</h2>
                    <ul class="col">
                        <li>
                            每日委托
                        </li>
                        <li>
                            抽卡机制
                        </li>
                        <li>
                            等级提升
                        </li>
                        <li>
                            解锁锚点
                        </li>
                    </ul>
                </li>
                <li>
                    <h2>游戏攻略↓</h2>
                    <ul class="col">
                        <li>
                            委托攻略
                        </li>
                        <li>
                            大世界攻略
                        </li>
                        <li>
                            秘境攻略
                        </li>
                        <li>
                            道具攻略
                        </li>
                    </ul>
                </li>
                <li>
                    <h2>广纳贤士↓</h2>
                    <ul class="col">
                        <li>
                            程序员
                        </li>
                        <li>
                            美工组
                        </li>
                        <li>
                            策划组
                        </li>
                        <li>
                            运维组
                        </li>
                    </ul>
                </li>
                <li>
                    <h2>报名参加小活动</h2>
            
                </li>
                <li>
                    <h2>其他↓</h2>
                    <ul class="col">
                        <li>
                            调查问卷
                        </li>
                        <li>
                            实用信息
                        </li>
                        <li>
                            提瓦特风光
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>

    <script src="js/jquery.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/Swiper/3.3.1/js/swiper.js"></script>
    <script>
        let cnt = 0;
        var swiper = new Swiper('.swiper-container', {
            pagination: '.swiper-pagination',
            nextButton: '.swiper-button-next',
            prevButton: '.swiper-button-prev',
            paginationClickable: true,
            spaceBetween: 30,
            centeredSlides: true,
            autoplay: 2500,
            autoplayDisableOnInteraction: false
        });
        $(function () {
            $(".search").on("click", function () {
                $(".input").toggle();
            });
            $(".buttonelement").on("click", function () {
                $(".modal").toggle();
                $(".downer").toggle();
                if (cnt % 2 == 0) {
                    $(".head").css("background-image", "none")
                        .css("background-color", "black")
                        .css("opacity", "0.8");
                    $(".banner").css("justify-content", "center");
                    $(".buttonelement").css("background-image", "url('images/img31.png')");
                }
                else {
                    $(".head").css("background-color", "none")
                        .css("background-image", "linear-gradient(#000000, #ffffff)")
                        .css("opacity", "0.9");
                    $(".banner").css("justify-content", "none");
                    $(".buttonelement").css("background-image", "url('images/navA.png')");
                }
                cnt++;
            })
            $(".downerelement").on("mouseover", function () {
                $(".downerelement .nav").hide();  //所有子div都hide
                $(this).children(".nav").show(); //当前的show
            }).on("mouseout", function () {
                $(".downerelement .nav").css("display", "none");
            });
        });
    </script>

</body>

</html>